import React, { Component } from "react";
import { Form, Tag, Icon } from "antd";
import { taskGetStepThreeDetail } from "../../../services/api";
import "../Task.less";

@Form.create()
export default class TaskDetailBasicInfomation extends Component {
  state = {
    comTaskId: this.props.comTaskId,
    selectedTags: [], //参与人员名单列表集合
    chargePerName: "" //任务负责人名字
  };

  componentDidMount() {
    this.getDetailsData(); //发布设置
  }

  getDetailsData = () => {
    taskGetStepThreeDetail({ comTaskId: this.state.comTaskId })
      .then(data => {
        console.log("发布设置", data.data);
        if (data.data) {
          this.setState({
            chargePerName: data.data.chargePerName,
            selectedTags: data.data.departList
          });
        }
      })
      .catch(err => {
        console.log(err, "err");
      });
  };

  renderUsersDataList = () => {
    return this.state.selectedTags.map((v, k) => {
      return (
        <div key={k}>
          <Tag>
            <Icon type="team" />
            {v.title}:
          </Tag>
          <div style={{ overflow: "hidden" }}>
            {this.renderDataList(v.perList)}
          </div>
        </div>
      );
    });
  };

  renderDataList = s_val => {
    return s_val.map((v, k) => {
      return (
        <div className="list" key={k} style={{ float: "left" }}>
          <Tag>
            <Icon type="user" />
            {v.perName}
          </Tag>
        </div>
      );
    });
  };

  render() {
    return (
      <div className="TaskDetail TaskDetailPublishSetting">
        <div className="title">任务负责人:{this.state.chargePerName}</div>
        <div className="tablebox">
          <span className="label">参与人员名单:</span>
          <div className="userLIst">{this.renderUsersDataList()}</div>
        </div>
      </div>
    );
  }
}
